<template>
  <div class="search-page">
    <el-header>
      <!-- 上方搜索框和搜索图标容器 -->
      <div class="search-container">
        <!-- 上方搜索框和搜索图标水平布局 -->
        <div class="search-box-container">

          <!-- 搜索框 -->
          <!-- <el-input
            v-model="searchInput"
            class="search-box"
            :placeholder="dynamicPlaceholder"
            clearable="true"
            @keyup.enter="search"
          ></el-input> -->

          <el-autocomplete
            v-model="searchInput"
            class="search-box"
            :placeholder="dynamicPlaceholder"
            :fetch-suggestions="querySearchAsync"
            :placement="bottom-start"
            :fit-input-width="true"
            style="width:300px"
            clearable
            @keyup.enter="search"
          ></el-autocomplete>

          <!-- 搜索图标 -->
          <el-button @click="search" type="primary" :icon="Search" color="var(--main-color)" class="search-button">
            <el-icon size="20" class="search-icon">
              <Search />
            </el-icon>
          </el-button>  
          <el-backtop :right="100" :bottom="100" style="color: var(--main-color);"/>
        </div>
      </div>
    </el-header>

    <el-container>
      <!-- 左侧筛选表单 -->
      <el-aside width="200px">
        <el-menu
          ref="menu"
          style="height: 500px;"
          class="el-menu-vertical-demo"
          @open="getSearchBuckets"
          @close="handleClose"
        >
        <div v-if="selectedOption === 'paper'">
          <el-sub-menu index="concepts">
            <template #title>
              <el-icon><Flag /></el-icon>
              <span>领域</span>
            </template>
            <el-menu-item v-if="loading1" v-loading="loading1" style="height: 70px;">
            </el-menu-item>
            <el-checkbox  v-model="checked1[index]" @change="handleCheckboxChange(index, option.key, 'concepts')" v-for="(option, index) in conceptsMenuList" :key="index" :index="index + 1" style="width: 170px; height: 45px;">
              <span>{{ option.key }}</span>
            </el-checkbox>
          </el-sub-menu>
          <el-sub-menu index="venue">
            <template #title>
              <el-icon><Notebook /></el-icon>
              <span>期刊</span>
            </template> 
            <el-menu-item v-if="loading2" v-loading="loading2" style="height: 70px;">
            </el-menu-item>
              <el-checkbox v-model="checked2[index]" @change="handleCheckboxChange(index, option.key, 'venue')" v-for="(option, index) in venueMenuList" :key="index" :index="index + 1" style="width: 170px; height: 45px;">
                <span style="white-space: pre-wrap;">{{ option.key }}</span>
              </el-checkbox>
          </el-sub-menu>
          <el-sub-menu index="paperType">
            <template #title>
              <el-icon><Menu /></el-icon>
              <span>类型</span>
            </template>
            <el-menu-item v-if="loading3" v-loading="loading3" style="height: 70px;">
            </el-menu-item>
              <el-checkbox v-model="checked3[index]" @change="handleCheckboxChange(index, option.key, 'paperType')" v-for="(option, index) in typePaperMenuList" :key="index" :index="index + 1" style="width: 170px; height: 45px;">
                <span>{{ option.key }}</span>
              </el-checkbox>
          </el-sub-menu>
        </div>
        <div v-if="selectedOption === 'scholar'">
          <span style="color:rgb(99, 108, 132)">暂时无法筛选学者项</span>
        </div>
        <div v-if="selectedOption === 'venue'">
          <el-sub-menu index="venueType">
            <template #title>
              <el-icon><Menu /></el-icon>
              <span>类型</span>
            </template>
            <el-menu-item v-if="loading4" v-loading="loading4" style="height: 70px;">
            </el-menu-item>
              <el-checkbox v-model="checked4[index]" @change="handleCheckboxChange(index, option.key, 'venueType')" v-for="(option, index) in typeVenueMenuList" :key="index" :index="index + 1" style="width: 170px; height: 45px;">
                <span>{{ option.key }}</span>
              </el-checkbox>
          </el-sub-menu>
        </div>
        <div v-if="selectedOption === 'concept'">
          <el-sub-menu index="level">
            <template #title>
              <el-icon><Histogram /></el-icon>
              <span>学科分级</span>
            </template>
            <el-menu-item v-if="loading5" v-loading="loading5" style="height: 70px;">
            </el-menu-item>
              <el-checkbox v-model="checked5[index]" @change="handleCheckboxChange(index, option.key, 'level')" v-for="(option, index) in levelMenuList" :key="index" :index="index + 1" style="width: 170px; height: 45px;">
                <span>{{ option.key }}</span>
              </el-checkbox>
          </el-sub-menu>
        </div>
        <div v-if="selectedOption === 'org'">
          <el-sub-menu index="orgType">
            <template #title>
              <el-icon><Menu /></el-icon>
              <span>类型</span>
            </template>
            <el-menu-item v-if="loading6" v-loading="loading6" style="height: 70px;">
            </el-menu-item>
              <el-checkbox v-model="checked6[index]" @change="handleCheckboxChange(index, option.key, 'orgType')" v-for="(option, index) in typeOrgMenuList" :key="index" :index="index + 1" style="width: 170px; height: 45px;">
                <span>{{ option.key }}</span>
              </el-checkbox>
          </el-sub-menu>
        </div>
        </el-menu>
      </el-aside>

      <el-main class="content-container">
        <el-header>
          <el-menu
            :default-active="selectedOption"
            :default-openeds="selectedOption"
            class="menu"
            mode="horizontal"
            style="width: 900px; display: flex;margin:0 auto;overflow-x: auto;border: none;"
            text-color=var(--main-color)
            active-text-color=var(--main-color)
            @select="handleSelect"
          >
            <el-menu-item index="paper">文献<span class="count">{{ this.summary.paper_count }}</span></el-menu-item>
            <el-menu-item index="scholar">学者<span class="count">{{ this.summary.scholar_count }}</span></el-menu-item>
            <el-menu-item index="venue">期刊<span class="count">{{ this.summary.venue_count }}</span></el-menu-item>
            <el-menu-item index="org">机构<span class="count">{{ this.summary.org_count }}</span></el-menu-item>
            <el-menu-item index="concept">领域<span class="count">{{ this.summary.concept_count }}</span></el-menu-item>
          </el-menu>
        </el-header>
        <div v-if="selectedOption === 'paper'">
          <el-header class="inHeader">
            <div class="sortButton">
              <el-button @click="changeSortKey('')">相关度<el-icon><Bottom /></el-icon></el-button>
              <el-button @click="changeSortKey('publication_date')">日期<el-icon><Bottom /></el-icon></el-button>
              <el-button @click="changeSortKey('cited_by_count')">总引用量<el-icon><Bottom /></el-icon></el-button>
            </div>
            <el-pagination
              :page-size="10"
              :pager-count="11"
              :current-page="page"
              layout="prev, pager, next"
              :total="summary.paper_count > 9990 ? 9990 : summary.paper_count"
              @current-change="handleCurrentChange"
            />
          </el-header>
          <div v-if="loadingPaper" v-loading="loadingPaper" style="height: 150px; width: 1100px;">
          </div>
          <div v-loading="loadingPaper">
            <div v-for="(paper, index) in paperList" class="work-item" :key="index" @click="toPaper(paper._id)">
              <h3>{{ paper._source.display_name }}</h3>
              <el-icon class="info"><UserFilled /></el-icon>
              <span class="info">作者：</span>
              <span v-for="(authorship, index) in paper._source.authorships" :key="index" class="info">
                    <a @click.stop="toScholar(authorship.author.id)">{{ authorship.author.display_name }}</a>
                    {{ index < paper._source.authorships.length - 1 ? ', ' : '' }}
              </span>
              <p class="info"><el-icon><Calendar /></el-icon>发表日期：{{ paper._source.publication_date }}</p>
            </div>
          </div>
        </div>
        <div v-if="selectedOption === 'scholar'">
          <el-header class="inHeader">
            <div class="sortButton">
              <el-button @click="changeSortKey('')">相关度<el-icon><Bottom /></el-icon></el-button>
              <el-button @click="changeSortKey('works_count')">文献数量<el-icon><Bottom /></el-icon></el-button>
              <el-button @click="changeSortKey('cited_by_count')">总引用量<el-icon><Bottom /></el-icon></el-button>
              <el-button @click="changeSortKey('h_index')">H指数<el-icon><Bottom /></el-icon></el-button>
            </div>
            <el-pagination
              :page-size="10"
              :pager-count="11"
              :current-page="page"
              layout="prev, pager, next"
              :total="summary.scholar_count > 9990 ? 9990 : summary.scholar_count"
              @current-change="handleCurrentChange"
            />
          </el-header>
          <div v-if="loadingScholar" v-loading="loadingScholar" style="height: 150px; width: 1100px;">
          </div>
          <div v-loading="loadingScholar">
            <div v-for="(scholar, index) in scholarList" :key="index" class="work-item" @click="toScholar(scholar._id)">
              <h3>{{ scholar._source.display_name }}</h3>
              <span class="info"><el-icon><OfficeBuilding /></el-icon>最近所属机构：
              {{ scholar._source.last_known_institution
                ? scholar._source.last_known_institution.display_name
                : '暂时没有所属机构' }}</span>
              <p class="info"><el-icon><Notebook /></el-icon>作品数量：{{ scholar._source.works_count }}</p>
            </div>
          </div>
        </div>
        <div v-if="selectedOption === 'venue'">
          <el-header class="inHeader">
            <div class="sortButton">
              <el-button @click="changeSortKey('')">相关度<el-icon><Bottom /></el-icon></el-button>
              <el-button @click="changeSortKey('works_count')">文献数量<el-icon><Bottom /></el-icon></el-button>
              <el-button @click="changeSortKey('cited_by_count')">总引用量<el-icon><Bottom /></el-icon></el-button>
              <el-button @click="changeSortKey('h_index')">H指数<el-icon><Bottom /></el-icon></el-button>
            </div>
            <el-pagination
              :page-size="10"
              :pager-count="11"
              :current-page="page"
              layout="prev, pager, next"
              :total="summary.venue_count > 9990 ? 9990 : summary.venue_count"
              @current-change="handleCurrentChange"
            />
          </el-header>
          <div v-if="loadingVenue" v-loading="loadingVenue" style="height: 150px; width: 1100px;">
          </div>
          <div v-loading="loadingVenue">
            <div v-for="(venue, index) in venueList" :key="index" class="work-item" @click="toVenue(venue._id)">
              <h3>{{ venue._source.display_name }}</h3>
              <p class="info"><el-icon><Link /></el-icon>ISSN-L号码：
                <span v-if="venue._source.issn_l">{{ venue._source.issn_l }}</span>
                <span v-else>暂无ISSN-L号码</span></p>
              <p class="info"><el-icon><Notebook /></el-icon>作品数量：{{ venue._source.works_count }}</p>
              <p class="info"><el-icon><Bottom /></el-icon>总被引用量：{{ venue._source.cited_by_count }}</p>
            </div>
          </div>
        </div>
        <div v-if="selectedOption === 'org'">
          <el-header class="inHeader">
            <div class="sortButton">
              <el-button @click="changeSortKey('')">相关度<el-icon><Bottom /></el-icon></el-button>
              <el-button @click="changeSortKey('works_count')">文献数量<el-icon><Bottom /></el-icon></el-button>
              <el-button @click="changeSortKey('cited_by_count')">总引用量<el-icon><Bottom /></el-icon></el-button>
              <el-button @click="changeSortKey('h_index')">H指数<el-icon><Bottom /></el-icon></el-button>
            </div>
            <el-pagination
              :page-size="10"
              :pager-count="11"
              :current-page="page"
              layout="prev, pager, next"
              :total="summary.org_count > 9990 ? 9990 : summary.org_count"
              @current-change="handleCurrentChange"
            />
          </el-header>
          <div v-if="loadingOrg" v-loading="loadingOrg" style="height: 150px; width: 1100px;">
          </div>
          <div v-loading="loadingOrg">
            <div v-for="(org, index) in orgList" :key="index" class="work-item" @click="toOrg(org._id)">
              <h3>{{ org._source.display_name }}</h3>
              <p class="info"><el-icon><Grid /></el-icon>机构类型：{{ org._source.type }}</p>
              <p class="info"><el-icon><Notebook /></el-icon>作品数量：{{ org._source.works_count }}</p>
              <p class="info"><el-icon><Bottom /></el-icon>总被引用量：{{ org._source.cited_by_count }}</p>
            </div>
          </div>
        </div>
        <div v-if="selectedOption === 'concept'">
          <el-header class="inHeader">
            <div class="sortButton">
              <el-button @click="changeSortKey('')">相关度<el-icon><Bottom /></el-icon></el-button>
              <el-button @click="changeSortKey('works_count')">文献数量<el-icon><Bottom /></el-icon></el-button>
              <el-button @click="changeSortKey('cited_by_count')">总引用量<el-icon><Bottom /></el-icon></el-button>
              <el-button @click="changeSortKey('h_index')">H指数<el-icon><Bottom /></el-icon></el-button>
            </div>
            <el-pagination
              :page-size="10"
              :pager-count="11"
              :current-page="page"
              layout="prev, pager, next"
              :total="summary.concept_count > 9990 ? 9990 : summary.concept_count"
              @current-change="handleCurrentChange"
            />
          </el-header>
          <div v-if="loadingConcept" v-loading="loadingConcept" style="height: 150px; width: 1100px;">
          </div>
          <div v-loading="loadingConcept">
            <div v-for="(concept, index) in conceptList" :key="index" class="work-item" @click="toConcept(concept._id)">
              <h3>{{ concept._source.display_name }}</h3>
              <p class="info">{{ concept._source.description }}</p>
              <p class="info"><el-icon><Notebook /></el-icon>作品数量：{{ concept._source.works_count }}</p>
              <p class="info"><el-icon><Bottom /></el-icon>总被引用量：{{ concept._source.cited_by_count }}</p>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { ref } from 'vue';
import { req_getSearchBuckets, req_getSearch, req_searchSuggestions } from '../../api/index.ts';

export default {
  data() {
    return {
      selectedOption: 'paper',
      searchInput: '',
      filterItem1: '',
      filterItem2: [],
      field: '',
      page: 1,
      venueMenuList: [],
      conceptsMenuList: [],
      typePaperMenuList: [],
      typeVenueMenuList: [],
      typeOrgMenuList: [],
      levelMenuList: [],
      checked1: [],
      checked2: [],
      checked3: [],
      checked4: [],
      checked5: [],
      checked6: [],
      typePaperChooseList: [],
      typeVenueChooseList: [],
      typeOrgChooseList: [],
      agg: {
        venue: [],
        concepts: [],
        type: [],
        level: [],
      },
      summary: {},
      paperList: [],
      scholarList: [],
      venueList: [],
      conceptList: [],
      orgList: [],
      currentPage: '1',
      sort_key: "",
      loading: true,
      loading1: true,
      loading2: true,
      loading3: true,
      loading4: true,
      loading5: true,
      loading6: true,
      loadingPaper: true,
      loadingScholar: true,
      loadingVenue: true,
      loadingOrg: true,
      loadingConcept: true
    };
  },
  computed: {
    dynamicPlaceholder() {
      return `Search ${this.selectedOption}...`;
    },
  },
  watch: {
    searchInput(newVal) {
      this.checked1 = this.checked1.map(() => false);
      this.checked2 = this.checked1.map(() => false);
      this.checked3 = this.checked1.map(() => false);
      this.checked4 = this.checked1.map(() => false);
      this.checked5 = this.checked1.map(() => false);
      this.checked6 = this.checked1.map(() => false);
      this.venueMenuList = [];
      this.conceptsMenuList = [];
      this.typePaperMenuList = [];
      this.typeVenueMenuList = [];
      this.typeOrgMenuList = [];
      this.levelMenuList = [];
      this.$refs.menu.close('venue');
      this.$refs.menu.close('concepts');
      this.$refs.menu.close('paperType');
      this.$refs.menu.close('venueType');
      this.$refs.menu.close('orgType');
      this.$refs.menu.close('level');
    },
    // currentPage(newPage) {
    //   console.log("new",newPage);
    //   this.search();
    // },
  },
  methods: {
    changeSortKey(sort_key){
      this.page = 1;
      this.sort_key=sort_key;
      this.search();
    },
    search() {
      this.loadingPaper = true;
      this.loadingScholar = true;
      this.loadingVenue = true;
      this.loadingOrg = true;
      this.loadingConcept = true;
      req_getSearch(this.searchInput, this.selectedOption, this.page, this.sort_key , this.agg).then(res => {
        const errno = res.data.errno;
        const msg = res.data.msg;
        if (errno === 1) {
          this.summary = res.data.summary;
          this.paperList = res.data.paper_data;
          this.scholarList = res.data.scholar_data;
          this.venueList = res.data.venue_data;
          this.orgList = res.data.org_data;
          this.conceptList = res.data.concept_data;
          
          console.log("agg",this.agg);
          console.log("count",this.venueList);
        } else if ([1001, 1002, 1003, 2001, 2002].includes(errno)) {
          ElMessage.info(msg);
        } else {
          console.error('Error getting venue:', msg);
        }
      }).catch(error => {
        console.error('Error getting venue:', error);
      });
      this.loadingPaper = false;
      this.loadingScholar = false;
      this.loadingVenue = false;
      this.loadingOrg = false;
      this.loadingConcept = false;
    },
   // 获取搜索建议
    querySearchAsync(queryString, cb) {
        const tarGet = this.selectedOption;
        req_searchSuggestions(tarGet, queryString)
            .then(response => {
                const errno = response.data.errno;
                const msg = response.data.msg;
                const suggestionsFormatted = response.data.suggestions.map(value => ({ value }));
                if (errno === 1) {
                    cb(suggestionsFormatted);
                } else {
                    ElMessage.info(msg);
                }
            })
            .catch(error => {
                console.error('Error fetching search suggestions:', error);
            });
    },
    handleSelect(index) {      // 处理主菜单选择逻辑
      this.activeIndex = index;
      this.selectedOption = index;
      this.checked1 = this.checked1.map(() => false);
      this.checked2 = this.checked1.map(() => false);
      this.checked3 = this.checked1.map(() => false);
      this.checked4 = this.checked1.map(() => false);
      this.checked5 = this.checked1.map(() => false);
      this.checked6 = this.checked1.map(() => false);
      this.venueMenuList = [];
      this.conceptsMenuList = [];
      this.typePaperMenuList = [];
      this.typeVenueMenuList = [];
      this.typeOrgMenuList = [];
      this.levelMenuList = [];
      this.typePaperChooseList = [];
      this.typeOrgChooseList = [];
      this.typeVenueChooseList = [];
      this.$refs.menu.close('venue');
      this.$refs.menu.close('concepts');
      this.$refs.menu.close('paperType');
      this.$refs.menu.close('venueType');
      this.$refs.menu.close('orgType');
      this.$refs.menu.close('level');
      this.agg = {
        venue: [],
        concepts: [],
        type: [],
        level: [],
      };
      this.page = 1;
      this.sort_key = "";
      this.search();
    },

    getSearchBuckets(index){
      this.loading1=true;
      this.loading2=true;
      this.loading3=true;
      this.loading4=true;
      this.loading5=true;
      this.loading6=true;
      this.field = index;
      if(this.field === 'paperType' || this.field === 'venueType' || this.field === 'orgType'){
        this.field = 'type';
      }
      req_getSearchBuckets(this.searchInput, this.selectedOption, this.field).then(res => {
        const errno = res.data.errno;
        const msg = res.data.msg;
        if (errno === 1) {
          if(this.field === 'venue'){
            this.venueMenuList = res.data.buckets;
          }
          else if(this.field === 'concepts'){
            this.conceptsMenuList = res.data.buckets;
          }
          else if (this.field === 'type') {
            if(this.selectedOption === 'paper'){
            this.typePaperMenuList = res.data.buckets;
            }
            else if(this.selectedOption === 'venue'){
              this.typeVenueMenuList = res.data.buckets;
            }
            else if(this.selectedOption === 'org'){
              this.typeOrgMenuList = res.data.buckets;
            }
          }
          else if (this.field === 'level') {
            this.levelMenuList = res.data.buckets;
          }
        } else if ([1001, 1002, 1003, 2001, 2002].includes(errno)) {
          ElMessage.info(msg);
        } else {
          console.error('Error getting venue:', msg);
        }
      }).catch(error => {
        console.error('Error getting venue:', error);
      });
      this.loading1=false;
      this.loading2=false;
      this.loading3=false;
      this.loading4=false;
      this.loading5=false;
      this.loading6=false;
    },

    handleCheckboxChange(label,key,target) {
      if (target === 'concepts') {
        if (this.checked1[label]) {
          this.agg.concepts.push(key);
        } else {
          const index = this.agg.concepts.indexOf(key);
          if (index !== -1) {
            this.agg.concepts.splice(index, 1);
          }
        }
      }
      else if (target === 'venue') {
        if (this.checked2[label]) {
          this.agg.venue.push(key);
        } else {
          const index = this.agg.venue.indexOf(key);
          if (index !== -1) {
            this.agg.venue.splice(index, 1);
          }
        }
      }
      else if (target === 'paperType') {
        if (this.checked3[label]) {
          this.typePaperChooseList.push(key);
          this.agg.type = this.typePaperChooseList;
        } else {
          const index = this.typePaperChooseList.indexOf(key);
          if (index !== -1) {
            this.typePaperChooseList.splice(index, 1);
            this.agg.type = this.typePaperChooseList;
          }
        }
      }
      else if (target === 'venueType') {
        if (this.checked4[label]) {
          this.typeVenueChooseList.push(key);
          this.agg.type = this.typeVenueChooseList;
        } else {
          const index = this.typeVenueChooseList.indexOf(key);
          if (index !== -1) {
            this.typeVenueChooseList.splice(index, 1);
            this.agg.type = this.typeVenueChooseList;
          }
        }
      }
      else if (target === 'orgType') {
        if (this.checked6[label]) {
          this.typeOrgChooseList.push(key);
          this.agg.type = this.typeOrgChooseList;
        } else {
          const index = this.typeOrgChooseList.indexOf(key);
          if (index !== -1) {
            this.typeOrgChooseList.splice(index, 1);
            this.agg.type = this.typeOrgChooseList;
          }
        }
      }
      else if (target === 'level'){
        if (this.checked5[label]) {
          this.agg.level.push(key);
        } else {
            const index = this.agg.level.indexOf(key);
            if (index !== -1) {
              this.agg.level.splice(index, 1);
            }
        }
      }
      this.page = 1;
      this.search();
    },
    handleCurrentChange(val){
      this.page = val;
      console.log("new",this.page)
      this.loadingPaper = true;
      this.loadingScholar = true;
      this.loadingVenue = true;
      this.loadingOrg = true;
      this.loadingConcept = true;
      this.search();
    },

    toPaper(paperId){
      const paper_id = paperId;
      const route = this.$router.resolve({
        name: 'paper', params: { paper_id }
      });
      window.open(route.href, '_blank');
    },
    toScholar(scholarId){
      const scholar_id = scholarId;
      const route = this.$router.resolve({
        name: 'scholar', params: { scholar_id }
      });
      window.open(route.href, '_blank');
    },
    toVenue(venueId){
      const venue_id = venueId;
      const route = this.$router.resolve({
        name: 'venue', params: { venue_id }
      });
      window.open(route.href, '_blank');
    },
    toOrg(orgId){
      const org_id = orgId;
      const route = this.$router.resolve({
        name: 'org', params: { org_id }
      });
      window.open(route.href, '_blank');
    },
    toConcept(conceptId){
      const concept_id = conceptId;
      const route = this.$router.resolve({
        name: 'concept', params: { concept_id }
      });
      window.open(route.href, '_blank');
    },
  },
  mounted() {
    // 从 URL 获取参数
    const target = this.$route.query.target;
    const keyword = this.$route.query.keyword;
    const page = this.$route.query.page;

    // 将参数设置为搜索框的初始值
    this.selectedOption = target || 'paper';
    this.searchInput = keyword || '';
    this.search();
  },
};
</script>

<style scoped>
.search-page {
  padding: 20px;
}

.search-container {
  text-align: center;
  margin-bottom: 20px;
}

.search-box-container {
  margin-top: 20px;
  width: 800px;
  padding-left: 280px;
  transform: scale(1.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.custom-select {
  width: 100px;
  margin-right: 10px;
}

.search-box {
  width: 200px;
}

.search-icon {
  color: var(--text-color);
}

.search-button {
  margin-left: 10px;
}

.filter-container {
  margin-right: 20px;
}

.el-aside {
  margin: 20px;
}
.content-container {
  padding-top: 0;
  margin: 20px;
  margin-top: 0;
  flex: 1;
}

.menu .el-menu-item {
  width: 150px;
  font-size: 24px; /* 设置字体大小 */
  font-weight: bold; /* 设置字体粗细 */
}

.sortButton {
  position: absolute;
  left: 40%;
  transform: translateX(-50%);
}

.el-pagination{
  position: absolute;
  left: 75%;
  transform: translateX(-50%);
}

.inHeader{
  margin-top: 10px;
  height: 35px;
}
.count {
  font-size: 20px;
}

.work-item {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 15px;
  margin: 15px 0;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s;
  cursor: pointer;
}

a {
    text-decoration: underline; /* 添加下划线 */
    color: inherit; /* 继承父元素的颜色，保持默认颜色 */
  }

a:hover {
    color: #3e76e6; /* 在悬停时变更颜色 */
  }

.info{
  color: #717171;
}
</style>